<template>
  <t-drawer
    :visible="visible"
    :footer="footer"
    :zIndex="zIndex"
    :onCancel="onCancel"
    :onOverlayClick="hide"
    :onConfirm="onConfirm"
    @close="hide"
    :placement="placement"
    :attach="attach"
    :class="cpClass"
    :closeBtn="true"
    :sizeDraggable="sizeDraggable"
    :ref="'customDrawer' + uuid"
  >
    <!--自定义头部-->
    <template #header>
      <div>
        <span v-html="title"></span>
        <span :class="utils.hasHtml(subtitle) ? '' : 'span-msg'" v-html="subtitle"></span>
        <t-message class="msg-right-tip" theme="loading" v-show="msgTheme == 'loading'">{{loadingText}}</t-message>
        <t-message class="msg-right-tip" theme="success"  v-show="msgTheme == 'success'">{{loadingTextSuccess}}</t-message>
        <t-message class="msg-right-tip" theme="warning"  v-show="msgTheme == 'warning'">{{loadingTextError}}</t-message>
      </div>
    </template>
    <div class="custom-body" :style="cpStyle">
      <slot name="content"></slot>
    </div>


  </t-drawer>
</template>

<script>
export default {
  desc: '自定义抽屉',
  name: 'customDrawer',
  components: {},
  props: {
    /**
     * @Description：标题
     * @Date 2023-10-10
     */
    title: {
      type: String,
      default: () => '请传入窗口标题',
    },
    /**
     * @Description：子标题
     * @Date 2023-10-10
     */
    subtitle: {
      type: String,
      default: () => '',
    },
    /**
     * @Description：宽度，可取  50 80 100 600
     * @Date 2023-10-10
     */
    widthPer: {
      type: [Number, String],
      default: () => 50,
    },
    /**
     * @Description：抽屉方向。可选项：left/right/top/bottom
     * @Date 2023-10-18
     */
    placement: {
      type: String,
      default: () => 'top',
    },
    /**
     * @Description：抽屉挂载的节点，默认挂在组件本身的位置。数据类型为 String 时, body 则挂在最外层
     * @Date 2023-10-18
     */
    attach: {
      type: String,
      default: () => undefined,
    },
    /**
     * @Description：底部操作栏，默认会有“确认”和“取消”两个按钮。值为 true 显示默认操作按钮，值为 false 或 null 不显示任何内容
     * @Date 2023-10-10
     */
    footer: {
      type: Boolean,
      default: () => true,
    },
    /**
     * @Description：抽屉层级，样式默认为 1500
     * @Date 2023-10-18
     */
    zIndex: {
      type: Number,
      default: () => 1500,
    },
    /**
     * @Description：宽度，优先级最高
     * @Date 2023-10-22
     */
    widthPx: {
      type: Number,
      default: () => -1,
    },
    /**
     * @Description：高度，优先级最高
     * @Date 2023-10-22
     */
    heightPx: {
      type: Number,
      default: () => -1,
    },
    /**
     * @Description：追加样式类
     * @Date 2023-10-22
     */
    classAppend: {
      type: String,
      default: () => '',
    },
    /**
     * @Description：true 点击确认后，自动关闭窗口，false: 需要调用者自己关闭
     * @Date 2023-10-10
     */
    autoHide: {
      type: Boolean,
      default: () => true,
    },
    /**
     * @Description：true 可以拖动
     * @Date 2023-10-10
     */
    sizeDraggable: {
      type: Boolean,
      default: () => false,
    },
    /**
     * @Description：加载中
     * @Date 2023-10-10
     */
    isLoading: {
      type: Boolean,
      default: () => true,
    },
    /**
     * @Description：提示文字
     * @Date 2023-10-10
     */
    loadingText: {
      type: String,
      default: () => '自动保存中',
    },
    /**
     * @Description：提示文字
     * @Date 2023-10-10
     */
    loadingTextSuccess: {
      type: String,
      default: () => '保存成功',
    },
    /**
     * @Description：提示文字
     * @Date 2023-10-10
     */
    loadingTextError: {
      type: String,
      default: () => '操作失败',
    },
    /**
     * @Description：隐藏确认按钮
     * @Date 2023-10-10
     */
    hideConfirm: {
      type: Boolean,
      default:  () => false,
    },
  },
  mounted() {
    setTimeout(() => {
      this.setMinHeight(false)
    }, 500)
  },
  data() {
    return {
      // 是否显示
      visible: false,
      // 是否设置过
      isSetMinHeight: false,
      uuid: global.utils.uuid,
      // 提示信息主题
      msgTheme: ''
    }
  },
  methods: {
    /**
     * @Description：显示
     * @Date 2023-10-10
     */
    show() {
      if (this.visible) {
        return
      }
      this.setMinHeight(true)
      this.visible = true
      this.$emit('show')
    },

    // 隐藏
    hide() {
      // 已经隐藏了
      if (!this.visible) {
        return
      }
      this.visible = false
      this.$emit('hide')
    },

    // 确认
    onConfirm() {
      if (this.autoHide) {
        this.hide()
      }
      this.$emit('confirm')
    },

    // 取消
    onCancel() {
      this.hide()
      this.$emit('cancel')
    },

    // 获取样式类
    getInst() {
      return this.$refs['customDrawer' + this.uuid]
    },

    // 设置宽高
    setMinHeight(isCheck) {
      // if (isCheck && this.isSetMinHeight) {
      //   return
      // }
      if (!this.getInst()) {
        return
      }
      if (isCheck) {
        this.isSetMinHeight = true
      }
      //$(this.getInst().$el).find('.t-drawer__content-wrapper').css({'height': ''})
      if (this.widthPx != -1) {
        let css = {'width': 'auto' ,'margin-left': `calc((100% - ${this.widthPx}px) / 2)`}
        $(this.getInst().$el).find('.t-drawer__content-wrapper').css(css)
        // $(this.getInst().$el).find('.t-drawer__content-wrapper').width(this.widthPx)
      }

      if (this.heightPx != -1) {
        // $(this.getInst().$el).find('.t-drawer__content-wrapper').css({'height': this.heightPx + 'px', 'min-height': this.heightPx + 'px'})
        return
      }

      // if (this.widthPer == 100) {
      //   $(this.getInst().$el).find('.t-drawer__content-wrapper').css({ 'height': 'calc(100% - 10px)'})
      //   return
      // }
      //
      // // 以下为根据元素设置高度
      // let scrollHeightMax = 0
      // $(this.getInst().$el).find('.t-drawer__body').find('*').each(function () {
      //   let _this = $(this)
      //   if ($(this)[0].scrollHeight > scrollHeightMax) {
      //     scrollHeightMax = $(this)[0].scrollHeight
      //   }
      // })
      // if (scrollHeightMax < 100) {
      //   scrollHeightMax = 400
      // }
      //
      // let tableLength = $(this.getInst().$el).find('.vxe-grid').length
      //
      // $(this.getInst().$el).find('.t-drawer__content-wrapper').css({ 'height': scrollHeightMax + 150 + tableLength * 300 + 'px'})
    },

    // 操作中
    loading() {
      this.msgTheme = 'loading'
      setTimeout(() => {
        this.msgTheme = ''
      }, 1000 * 10)
    },

    // 操作成功
    loadingSuccess() {
      this.msgTheme = 'success'
      setTimeout(() => {
        this.msgTheme = ''
      }, 500)
    },

    // 操作失败
    formAutoSaveError() {
      this.msgTheme = 'warning'
      setTimeout(() => {
        this.msgTheme = ''
      }, 200)
    },
  },
  watch: {
    // 渲染结束加载数据,仅加载一次
    heightPx: {
      immediate: true, // 初始创建 watch 时立即执行回调函数
      deep: true, // 监听到对象里面的值的变化
      handler() {
        setTimeout(() => {
          this.setMinHeight()
        }, 1500)
      },
    }
  },
  computed: {
    cpClass() {
      let classAdd = 't-drawer-custom t-drawer-custom' + this.widthPer
      if (this.widthPx != -1 && this.heightPx != -1) {
        classAdd = 't-drawer-custom '
      }
      if (this.strings.isNotBlank(this.classAppend)) {
        classAdd = classAdd + ' ' + this.classAppend
      }

      if (this.hideConfirm) {
        classAdd = classAdd + ' custom-drawer-hide-confirm'
      }
      if (this.heightPx > 0) {
        classAdd = classAdd + ' custom-drawer-height-auto'
      }
      return classAdd
    },
    cpHeight() {
      return '500px'
    },
    cpStyle() {
      let style = {}
      if (this.widthPx != -1) {
        style.width = this.widthPx + 'px'
      }
      if (this.heightPx != -1) {
        // style.height = this.heightPx + 'px'
      }
      return style
    }
  },
}
</script>

<style lang="scss">
@import "../../../styles/color.scss";
.t-drawer-custom {
  .t-drawer__header {
    height: 35px !important;
    min-height: 35px !important;
    border-bottom: 1px solid #efefef;
    font-size: 16px;
    padding: 15px 10px;
    background-color: $border-color;
    color: #303133;
    font-weight: normal;
  }

  .t-drawer__body {
    padding: 0 10px !important;
  }

  .t-drawer__content-wrapper {
    width: auto !important;
    max-height: calc(100% - 10px) !important;
    height: calc(100% - 10px) !important;
    overflow-y: auto;
    margin-left: 200px;
    padding-top: 0px;
    padding-bottom: 10px;
  }
}


.t-drawer--open > .t-drawer__mask{
  opacity: 0.5;
}

/*百分之50宽度*/
.t-drawer-custom50 > .t-drawer__content-wrapper {
  /*height: calc(100% - 10px) !important;*/
  width: 50% !important;
  margin-left: 25% !important;
}

/*百分之80宽度*/
.t-drawer-custom80 > .t-drawer__content-wrapper {
  /*height: calc(100% - 10px) !important;*/
  width: calc(100% - 200px - 20%) !important;
  margin-left: calc(100% - 80%);
}

/*百分之90宽度*/
.t-drawer-custom90 > .t-drawer__content-wrapper {
  width: calc((100% - 250px)* 0.96) !important;
  margin-left: calc((100% - 250px)* 0.18);
}

/*百分之100宽度*/
.t-drawer-custom100 > .t-drawer__content-wrapper {
  height: 100% !important;
  width: calc(100% - 200px) !important;
}

/*宽度 600px*/
.t-drawer-custom600 > .t-drawer__content-wrapper {
  width: 600px !important;
  max-height: 600px !important;
  height: 500px !important;
  margin-left: calc((100% - 500px) / 2) !important;
}

/*宽度 600px*/
.custom-drawer-height-auto > .t-drawer__content-wrapper {
  height: auto !important;
}

.msg-right-tip{
  position: absolute;
  right: 30px;
  top: 4px;
  padding: 3px;
  background: transparent;
}


.custom-drawer-hide-confirm{
  .t-drawer__confirm{
    display: none!important;
  }
}

</style>
